<template>
  <view class="xiang">
    <view class="swiper-container">
      <swiper :current="current" @change="onChange" circular  autoplay interval="3000" duration="1000">
        <swiper-item v-for=" item in items" :key="item">
          <view class="swiper-item">
            <image :src="item" alt="swiper image" style="width: 750rpx; height: 400rpx;"></image>
          </view>
        </swiper-item>
      </swiper>
      <view class="custom-indicator">{{ current + 1 }} / {{ items.length }}</view>
    </view>

    <!-- 商品名称 -->
    <view class="xi-3" style="color:#000000; font-size: 45rpx;">
      {{ dt.goodsName }}
    </view>

    <!-- 数量选择 -->
    <view class="xi-2">
      <text style="color:#696969;">数量选择:</text>
      <uni-number-box
        v-model="quantity"
        @change="onQuantityChange"
        background="#2979FF"
        color="#fff"
        class="shu"
      />
    </view>

    <!-- 单位选择 -->
    <view class="xi-5">
      <text style="color:#696969;">选择单位:</text>
      <picker @change="bindPickerChange" :range="array">
        <view class="uni-input">{{array.unitName}}</view>
      </picker>
    </view>

    <!-- 商品详情 -->
    <view class="xi-6">
      <text class="shang" style="font-size: 40rpx;">商品详情</text>
    </view>
    <view class="xi-8">
      <text style="color:#999999;">商品简介:</text>
      <view class="xi-8-1">
        <text>{{ dt.introduces }}</text>
      </view>
    </view>

    <!-- 加入购物车按钮 -->
    <view class="du" v-if="shenhe === 1">
      <button class="b" @click="jia">加入鲸肚</button>
    </view>
	<view v-else class="shenhewenzi">
		<text>请先进行审核,审核通过后可进行下单</text>
	</view>
  </view>
</template>


<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import {
		http
	} from '/until/request.js'
import {
		useTokenStore
	} from '../../../store/token'; //导入pinia对象
const usetoken = useTokenStore()

const gocar = ref({
	"uid":usetoken.token.uid,
	"sid":"",
	"count":1
})

const current = ref(0);
const items = ref([
  '../../../static/img-spxq@3x.png',
  '../../../static/img-spxq@3x.png',
  '../../../static/img-spxq@3x.png',
  '../../../static/img-spxq@3x.png'
]); // 示例数据

const onChange = (e) => {
  current.value = e.detail.current;
};

const jia=async()=>{

	gocar.value.sid = dt.value.goodsId//商品id
	
	// console.log("后端购物车数据模型")
	// console.log(gocar.value)
	
	const zx=await http({
		url: "/gocar/insertGocar",
		method: "post",
		data:gocar.value
	})
	
	// const mes = zx.
	uni.showToast({
		title:zx.data,
		//将值设置为 success 或者直接不用写icon这个参数
		icon: 'success',
		//显示持续时间为 2秒
		duration: 2000
	}) 

	// // 使用 setTimeout 来延迟执行页面跳转
	// setTimeout(() => {
	//     uni.redirectTo({
	//         url: '/pages/businessman/fenlei/fenlei'
	//     });
	// }, 100); 

	
}


// 数量选择的绑定值
const quantity = ref(1); // 默认数量为 1

const onQuantityChange = (e)=>{
	console.log("商品数量变化:")
	console.log(e)
	gocar.value.count = e;
}


// 初始化 swiper 图片数组
const swipers = ref([
  // "../../static/zx (2).jpg",
  // "../../static/hai.jpg",
  // "../../static/zhang.jpg"
]);

// 商品数据模型
const dt = ref({});

// 获取商品详情的异步方法
const fetchGoodsDetails = async (goodsName) => {
  const response = await http({
    url: "/lft/stypes/selectByName/" + goodsName,
    method: "post"
  });
  dt.value = response.data;//商品数据模型赋值
  array.value=response.data;
  for (let i = 0; i < response.data.length; i++) {
      const iamge = response.data[i];
      // console.log(iamge);
  
      // 创建响应式引用
      const xx = ref(null);
  	// console.log(iamge.goodsPics)
  	// console
  	// .log(iamge.goodsPics.length)
      try {
          if (iamge.goodsPics.length >124) {
              // 假设长度大于124时，goodsPics已经是Base64编码的URL
  			
              xx.value = iamge.goodsPics;
  			// console.log(xx.value)
          } else {
              // 尝试解码Base64字符串
              xx.value = atob(iamge.goodsPics);
  			console.log(55555)
  			console.log(xx.value)
          }
          shang.value[i].goodsPics = xx.value;
  		console.log(8888888888887)
  		console.log(shang.value[i].goodsPics)
      } catch (error) {
          console.error(`Error decoding goodsPics for item ${i}:`, error);
          // 处理解码错误，例如设置默认图片
          shang.value[i].goodsPics = 'default-image-url';
      }
  }
};

const shenhe = ref();

onLoad((event) => {
	console.log("pinia阿斯达大厦存放的用户审核id")
	console.log(useTokenStore().token)
	shenhe.value = useTokenStore().token.reviewStatus
  fetchGoodsDetails(event.goodsName);/*  */
});

// 单位选择
const array = ref();

const selectedIndex = ref(0);

// 绑定单位选择器的事件/*  */
const bindPickerChange = (e) => {
  selectedIndex.value = e.detail.value;
};
</script>

<style  lang="scss"  scoped>
	.shenhewenzi{
		font-size: 35rpx;
		margin-top: 400rpx;
		margin-left: 80rpx;
		font-weight: bold;
		color: red;
		// border: 1px solid red;
	}
	.swiper-container {
	  position: relative;
	  width: 100%;
	  height: 320rpx; /* 根据需要调整高度 */
	}
	
	.swiper-item {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  height: 300rpx;
	  background-color: #f0f0f0; /* 示例背景颜色 */
	}
	
	.custom-indicator {
	  // border: 1px solid red;
	  position: absolute;
	  right: 10px;
	  bottom: 10px;
	  padding: 5px 10px;
	  background-color: rgba(0, 0, 0, 0.5);
	  color: white;
	  border-radius: 15px;
	  font-size: 14px;
	}
	.du{
		margin-top: 350rpx;
	}
	.b{
		 width: 700rpx;
		 height: 100rpx;
		 /* 圆角处理，使按钮看起来更柔和 */
		 border-radius: 25rpx;
		 /* 渐变背景色，增加视觉效果 */
		 background: linear-gradient(to right, red, red);
		 color: white;
		 font-size: 50rpx;
		 /* 添加阴影，使按钮有悬浮感 */
		 box-shadow: 2rpx 2rpx 6rpx rgba(0, 0, 0, 0.2);
		 /* 添加内阴影，增强立体感 */
		 box-shadow: inset 0 -2rpx 0 rgba(0, 0, 0, 0.1), 2rpx 2rpx 6rpx rgba(0, 0, 0, 0.2);
		 /* 可选：添加文字阴影，使文字更清晰 */
		 text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.2);
		 /* 过渡效果，使鼠标悬停时按钮有变化 */
		 transition: background 0.3s ease, transform 0.3s ease;
		 /* 鼠标悬停时放大按钮并改变背景色 */
		
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		 &:hover {
		     transform: scale(1.05);
		     background: linear-gradient(to right, red, red);
		 }
		 /* 如果是在移动端，可以使用active伪类代替hover */
		 &:active {
		     transform: scale(0.95);
		     background: red;
		 }
	}
	.xiang{
		// border: 1px solid red;
		padding-bottom: 100rpx;
	}
	.xi-1{
		display: flex;
		align-items: center;
		height: 50rpx;
	}
	.xi-2{
		display: flex;
		margin-left: 25rpx;
		margin-top: 30rpx;
	}
	.xi-3{
		margin-left: 25rpx;
		margin-top: 25rpx;
		
	}
	.xi-4{
		margin-top: 30rpx;
	}
	.xi-5{
		display: flex;
		margin-left: 25rpx;
		margin-top: 30rpx;
	}
	.shu{
		margin-left: 350rpx;
	}
	.uni-input{
		margin-left: 370rpx;
		border-radius: 100px; /* 设置足够大的值以制造出圆形效果 */
		border: 1px solid #0F62FE ; /* 可选，为输入框添加边框 */
		width: 80px; /* 可选，设置输入框宽度 */
		text-align: center;
		color: 	#0F62FE;
	}
	.xi-6{
		margin: 20rpx;
		margin-left: 20rpx;
	}
	.xi-7{
		margin: 20rpx;
	}
	.xi-7-1{
		margin-top: 25rpx;
	}
	.xi-8{
		margin:20rpx;
	}
	.xi-8-1{
		margin-top: 25rpx;
	}
</style>
